<template>
    <div class="projectManager">
        <div class="header">
            <x-header :left-options='{showBack:false}' @on-click-more="addProject">
                <a slot="right" class="iconfont icon-jia add" @click="addProject"></a>
                <span class="overTitle" slot="overwrite-title">{{title}}</span>
            </x-header>
        </div>

        <div class="content" v-if="proShow">
            <p class="title">
                项目列表({{getPro.length >= 0 ? getPro.length : 0}})
            </p>
            <div class="listBox">
                <grid :cols="2">
                    <grid-item v-for="(i,index) in getPro" :key="index">
                        <div class="listModel" :style="{background: 'url('+bg+')no-repeat',backgroundSize:'cover',backgroundRepeat:'round'}">
                            <p class="listText title">{{i.title}}</p>
                            <p class="listText content">{{i.claim}}</p>
                        </div>
                    </grid-item>
                </grid>
            </div>
        </div>

        <div class="emloContent" v-if="emlShow">
            <div class="titleCell cell">
                <p>姓名</p>
                <p>手机号</p>
                <p>密码</p>
            </div>
            <div class="cell emloInfo">
                <swipeout>
                    <swipeout-item v-for="(i,index) in getEmo" :key="index">
                        <div slot="right-menu">
                            <swipeout-button type="warn" background-color="#FF4141" @click.native="delectEmlo(i.id)">移除</swipeout-button>
                        </div>
                        <div slot="content" class="emloCell">
                            <p>{{i.ralname}}</p>
                            <p>{{i.mobile}}</p>
                            <p>{{i.pw}}</p>
                        </div>
                    </swipeout-item>
                </swipeout>
            </div>
        </div>

        <tabbar>
            <tabbar-item :selected='true' @on-item-click="proManager">
                <span slot="icon" class="iconfont icon-xiangmuguanli tabbarIcon"></span>
                <span slot="label">项目管理</span>
            </tabbar-item>
            <tabbar-item @on-item-click="emloManager">
                <!-- show-dot -->
                <span slot="icon" class="iconfont icon-yuangongguanli tabbarIcon"></span>
                <span slot="label">员工管理</span>
            </tabbar-item>
        </tabbar>

    </div>
</template>

<script>
import XHeader from 'vux/src/components/x-header/index.vue'
import Grid from 'vux/src/components/grid/grid.vue'
import GridItem from 'vux/src/components/grid/grid-item.vue'
import Tabbar from 'vux/src/components/tabbar/tabbar.vue'
import TabbarItem from 'vux/src/components/tabbar/tabbar-item.vue'
import Swipeout from 'vux/src/components/swipeout/swipeout.vue'
import SwipeoutItem from 'vux/src/components/swipeout/swipeout-item.vue'
import SwipeoutButton from 'vux/src/components/swipeout/swipeout-button.vue'

export default {
    name: 'projectManager',
    components: {
        XHeader,
        Grid,
        GridItem,
        Tabbar,
        TabbarItem,
        Swipeout,
        SwipeoutItem,
        SwipeoutButton
    },
    data() {
        return {
            proShow     : true,     //显示项目管理
            emlShow     : false,    //显示员工管理
            title       : "项目管理",
            getList     : "/project/project_list",//获取项目列表
            getEmop     : "/project/cilent_list", //获取员工列表（all）
            delEmop     : "/member/del",          //删除员工
            getPro      : {},       //存放获取项目列表数据
            getEmo      : {},       //存放获取员工列表数据
            bg          : require('../../assets/images/bg/blue.png'),
            getName     : [
                        { title: "计算器", content: "创建于2017-09-12", backImg: require('../../assets/images/bg/blue.png') },
                        { title: "CRM管理", content: "创建于2017-09-21", backImg: require('../../assets/images/bg/green.png') },
                        { title: "DIY购车", content: "创建于2017-09-30", backImg: require('../../assets/images/bg/yellow.png') }
            ],
        }
    },
    mounted() {
        this.showLoading("加载中……");
        this.query();
    },
    methods: {
        query() {
            var _this = this;
            _this.$http.post(  _this.getList, {
                page: 1,
            }).then(function(res) {
                if (res.data.code == 1) {
                    _this.getPro = res.data.data.data;
                    _this.$http.post(  _this.getEmop).then(function(res){
                        if(res.data.code == 1){
                            _this.hideLoading();
                            _this.getEmo = res.data.data;
                            console.log(_this.getEmo);
                        }else{
                            _this.toast("加载列表失败，请稍后再试");
                        }
                    });
                } else {
                    _this.getPro = [];
                    _this.toast("加载失败，请稍后再试");
                }
            });
        },
        addProject() {
            if (this.title == "项目管理") {
                this.$router.push({ path: "addProject" });
            } else {
                this.$router.push({ path: "addEmployee" });
            }
        },
        proManager() {
            this.emlShow = false;
            this.proShow = true;
            this.title = "项目管理";
        },
        emloManager() {
            this.emlShow = true;
            this.proShow = false;
            this.title = "员工管理";
        },
        delectEmlo(id) {
            var _this = this;
            var _id   = id;
            _this.$http.post( _this.delEmop,{
                id : _id,
            }).then(function(res){
                if(res.data.code == 1){
                    $.each(_this.getEmo,function(index,data){
                        if(data.id == _id){
                            _this.getEmo.splice(index,1);
                        }
                    });
                    _this.toastMsg("删除成功","success");
                    console.log(_this.getEmo);
                }
            });
        },
        deletedEmo(index){
            console.log(this.getEmo)
            //this.getEmo.splice(index,1);
        }
    },
}
</script>


<style scoped lang='less'>
@back-bule: #38ADFF;
@gray-text: #7D8790;
.projectManager {
    background-color: white;
    height: 90vh;
    margin-top: 40px;
    .header {
        .overTitle {
            display: inline-block;
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 40px;
            font-size: 18px;
        }
    }
    .add {
        color: @back-bule;
        display: inline-block;
        height: 30px;
        width: 40px;
        text-align: right;
        font-size: 20px;
    }
    .content {
        padding: 10px;
        padding-bottom: 60px;
        background-color: white;
        .title {
            color: @gray-text;
            padding: 10px;
        }
    }
    .listBox {
        .listModel {
            margin: 5px; // background-color: pink;
            border-radius: 8px; // height: 100px;
            padding: 5px;
            background-size: cover;
            background-repeat: round;
        }
        .listText {
            color: white;
            padding: 10px;
            background-color: transparent;
        }
    }
    .tabbarIcon {
        font-size: 20px;
    }
    .emloContent {
        margin-bottom: 55px;
        .cell {
            display: flex;
        }
        .titleCell p {
            flex: 1;
            text-align: center;
            height: 50px;
            line-height: 50px;
            color: #38ADFF;
            border-bottom: 2px #38ADFF solid;
            padding: 5px;
        }
        .emloCell {
            display: flex;
        }
        .emloCell p {
            flex: 1;
            text-align: center;
            border-bottom: 2px #E4E4E4 solid;
            height: 40px;
            line-height: 40px;
            padding: 5px;
            color: #333333;
        }
    }
}

@media (max-width:360px) {
    html,
    body,
    div,
    p,
    input,
    span,
    textarea,
    a,
    h1,
    label,
    .weui-cells {
        font-size: 12px;
    }
    .submitButton {
        height: 40px !important;
        line-height: 40px !important;
    }
}
</style>

